import {
  Table,
  Tag,
  Button,
  Drawer,
  Tree,
  Form,
  Input,
  Select,
  message,
  Space,
  Popconfirm,
} from "antd";
import { useEffect, useRef, useState } from "react";
import { addAdmin, delAdmin, editAdmin, getAdminList } from "@/api/user";
import { genMenuItems } from "@/utils";
import { asyncRoutes } from "@/router";
import ButtonCheck from "@/components/ButtonCheck";

const AdminList = () => {
  const columns = [
    {
      title: "用户名",
      dataIndex: "adminname",
    },
    {
      title: "角色",
      dataIndex: "role",
      render: (column: any, row: any) => {
        return column === 1 ? (
          <Tag color={"red"}>管理员</Tag>
        ) : (
          <Tag color={"green"}>超级管理员</Tag>
        );
      },
    },
    {
      title: "操作",
      render: (column: any, row: any) => {
        return (
          <Space>
            <Button size="small" type="primary" onClick={() => onEdit(row)}>
              修改
            </Button>

            <Popconfirm
              title="你确定要删除嘛?"
              onConfirm={() => onDel(row)}
              okText="Yes"
              cancelText="No"
            >
              <ButtonCheck roles={["2"]}>
                <Button size="small" type="primary" danger>
                  删除
                </Button>
              </ButtonCheck>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];
  const [dataSource, setDataSource] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const formRef = useRef(null);
  const [checkedKeys, setCheckedKeys] = useState([]);
  // isEdit 表示当前是否为 编辑管理员模式
  const [isEdit, setIsEidt] = useState(false);
  const [formModel, setFormModel] = useState({
    adminname: "1234",
    password: "",
    role: 1,
    checkedKeys: [],
  });

  /**
   * 重置表单
   */
  function resetForm() {
    // @ts-ignore
    formRef.current?.resetFields(["adminname", "password", "role"]);
    setCheckedKeys([]);
  }

  function openDrawer() {
    // 重置表单
    if (isEdit) {
      resetForm();
    }

    setIsEidt(false);
    setIsOpen(true);
  }

  function closeDrawer() {
    setIsOpen(false);
  }

  // 完整的 树形组件的数据
  const treeData = genMenuItems(asyncRoutes);
  function onTreeCheck(checkedKeys: any) {
    console.log("onTreeCheck", checkedKeys);
    setCheckedKeys(checkedKeys);
  }

  /**
   * 添加管理员的处理
   * @param values
   */
  async function handleAdminAdd(values: any) {
    //  1 合并 checkedKeys 组成成接口需要的数据格式
    const params = {
      ...values,
      checkedKeys,
    };

    //  调用接口
    await addAdmin(params);
    message.success("添加成功");

    //  关闭抽屉
    closeDrawer();

    fetchData();

    console.log(formRef.current);
    // @ts-ignore
    formRef.current!.resetFields(["adminname", "password", "role"]);
  }

  /**
   * 编辑管理员的处理
   * @param values
   */
  async function handleAdminEdit(values: any) {
    const params = {
      adminname: values.adminname, // 做为修改依据，正常使用用户Id，但是目前接口就是这样玩的
      role: values.role,
      checkedKeys,
    };

    await editAdmin(params);
    message.success("修改成功");
    // 关闭抽屉
    closeDrawer();
    // 重新请求列表数据
    fetchData();
  }

  /**
   * 删除管理员的处理
   * @param row
   */
  async function handleAdminDel(row: any) {
    await delAdmin(row.adminid);
    message.success("删除成功");
    // 重新请求列表数据
    fetchData();
  }

  async function onFinish(values: any) {
    // 判断当前模式，调用不同的函数
    if (isEdit) {
      // 编辑模式
      handleAdminEdit(values);
    } else {
      // 添加模式
      handleAdminAdd(values);
    }
  }

  /**
   * 获取列表数据
   */
  function fetchData() {
    getAdminList().then(({ data }) => {
      setDataSource(data);
    });
  }

  /**
   * 表格上的 编辑按钮点击
   */
  function onEdit(row: any) {
    // 设置 isEdit 为 true
    setIsEidt(true);

    //  打开抽屉
    setIsOpen(true);

    // 设置权限数据
    setCheckedKeys(row.checkedKeys);

    //  设置抽屉内表单的数据
    // @ts-ignore
    formRef.current?.setFieldsValue({
      adminname: row.adminname,
      password: row.password,
      role: row.role,
    });
  }

  /**
   * 表格上的 删除按钮点击
   */
  function onDel(row: any) {
    // 调用 handleAdminDel
    handleAdminDel(row);
  }

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="page-admin-list">
      <div className="page-header">
        <div className="handle">
          <Button type="primary" onClick={openDrawer}>
            添加管理员
          </Button>
        </div>
      </div>
      <Table dataSource={dataSource} columns={columns} rowKey="adminid" />;
      {/*  抽屉组件 */}
      <Drawer
        title="Basic Drawer"
        placement="right"
        forceRender
        onClose={closeDrawer}
        open={isOpen}
      >
        <Form ref={formRef} initialValues={{ role: 1 }} onFinish={onFinish}>
          <Form.Item
            name="adminname"
            label="管理员姓名"
            rules={[{ required: true, message: "必填" }]}
          >
            <Input disabled={isEdit} />
          </Form.Item>
          <Form.Item
            name="password"
            label="管理员密码"
            rules={[{ required: true, message: "必填" }]}
          >
            {/* 当修改模式时，密码不允许修改，后续调用修改接口的话，不要传递密码字段过去 */}
            <Input.Password disabled={isEdit} />
          </Form.Item>
          <Form.Item
            name="role"
            label="角色"
            rules={[{ required: true, message: "必填" }]}
          >
            <Select>
              <Select.Option value={1}>管理员</Select.Option>
              <Select.Option value={2}>超级管理员</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="路由权限">
            <Tree
              checkable
              fieldNames={{ title: "label" }}
              checkedKeys={checkedKeys}
              onCheck={onTreeCheck}
              treeData={treeData}
            />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit">
              {isEdit ? "确定修改" : "确定添加"}
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
};

export default AdminList;
